<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #reg_header {
            height: 110px;
            width: 100%;
            box-shadow: 0px 0px 10px #BBB;
        }

        #reg_header .reg_h_center {
            width: 1200px;
            height: 110px;
            margin: 0 auto;
            display: flex;
            background-image: url("/static/source/image/top-bg.png");
            background-repeat: repeat-x;
        }

        #reg_header .reg_h_left {
            height: 110px;
            flex: 1;
        }

        #reg_header .reg_h_left img {
            height: 100px;
            width: 120px;
            float: left;
        }

        #reg_header .reg_h_left h3 {
            float: left;
            margin-top: 80px;
            margin-left: 10px;
        }

        #reg_header .reg_h_right {
            height: 110px;
            flex: 1;
            padding-top: 50px;
            padding-left: 30px;
        }


        .reg_back {
            /*设置整体的尺寸、背景色、边距等*/
            width: 850px;
            height: 500px;
            border: 8px solid #eeeeee;
            background: white;
            margin: auto;
            margin-top: 20px;
        }

        .reg_left {
            /*设置左浮动和外边距*/
            float: left;
            margin: 10px;
        }

        .reg_left > p:first-child {
            /*设置段落（新用户注册）颜色和字体大小*/
            color: gray;
            font-size: 20px;
        }

        .reg_left > p:last-child {
            /*设置段落（USER REGISTER）颜色和字体大小*/
            color: #A6A6A6;
            font-size: 20px;
        }

        .reg_center {
            /*设置中间的各种输入框等*/
            float: left;
            width: 450px;
        }

        .reg_right {
            /*设置右边段落浮动和外间距*/
            float: right;
            margin: 30px;
        }

        .reg_right > p:first-child {
            font-size: 15px;
        }

        .reg_right p a {
            /*设置超链接（立即登录）颜色*/
            color: blue;
        }

        #btn_sub {
            /*注册按钮*/
            margin-left: 130px;
            background: #b9def0;
            color: whitesmoke;
            width: 150px;
            height: 40px;
            border: 1px solid gray;
        }

        #btn_sub:hover {
            background: #2aabd2;
            color: white;
        }

    </style>
</head>
<body>
<!--头部-->
<div id="reg_header">
    <div class="reg_h_center">
        <div class="reg_h_left">
            <div class="el-row" style="margin: 50px 50px 32px; color: rgb(35, 103, 177); font-size: 33px;">
                <h1><i class="fa fa-desktop"></i> 师生一体化教考系统 </h1>
            </div>
        </div>
    </div>
</div>


<!--表单内容-->
<div class="reg_back">
    <div class="reg_left">
        <p>新用户注册</p>
        <p style="color:limegreen;">欢迎！</p>
    </div>
    <div class="reg_center">
        <div class="reg_form" style="margin-top: 20px">
            <form method="post" novalidate>
                {% csrf_token %}
                {% for field in form %}
                    <div class="form-group">
                        <label>{{ field.label }}</label>
                        <span style="color: red"> {{ field }}{{ field.errors.0 }}</span>
                    </div>
                    {% for error in form.non_field_errors %}
                        <li>{{ error }}</li>
                    {% endfor %}

                {% endfor %}
                <tr>
                    <td colspan="2" align="center" style=";"><input type="submit" value="注册" id="btn_sub" style="margin-top: 27px;border-radius: 9px ;background-color: #5cb85c">
                    </td>
                </tr>
            
                <tr>
                <br>
                    {% if user_no %}
                        <span style="color: red"> {{ user_no }}</span>
                    {% endif %}
                </tr>

            </form>
        </div>
    </div>
    <div class="reg_right">
        <p>已有账号?<a href={% url 'load' %}>立即登录</a></p>
    </div>
</div>

</body>
</html>